<template>
    <nav>
        <div class="nav">
            <div class="logo">
                <img src="@/assets/logo.png" alt="" @clcik="goHome">
                <span>编程博客</span>
            </div>
            <ul>
                <router-link to="/home" >首页</router-link>
                <router-link to="/about">个人</router-link>
            </ul>
            <search/>
           

            <div class="user">
                <router-link to="/login" class="login" v-show="!show">登陆</router-link>
                <div class="logined" v-show="show" @mousemove="boxShow = true" @mouseleave="boxShow = false">
                    <img src="@/assets/photo.png" alt="" >
                    <p>{{username}}</p>
                    <div class="box" v-if="boxShow">
                        <p @click="exit">退出登陆</p>
                        <p @click="$router.push('/me')">个人信息</p>
                    </div>
                </div>
            </div>

        </div>
        
    </nav>
</template>

<script>
    import search from './Search.vue'
    export default {
        name:"Nav-Component",
        components:{search},
        data(){
            return {
                show:false,
                username:"",
                boxShow:false
            }
        },
        methods: {
            getUser(){
                const user = JSON.parse(sessionStorage.getItem('user'))
                if(user === null){
                    this.show = false
                    this.username = ''
                }else{
                    if(user.token){
                        this.show = true
                        this.username = user.username
                    }else{
                        this.show = false
                        this.username = ''
                    }
                }
            },

            exit(){
                sessionStorage.removeItem('user')
                setTimeout(()=>{
                    this.$router.push('/login')
                },100)
            },

            goHome(){
                alert(1)
                this.$router.push('/home')
            }
        },
        created() {
            this.getUser()
        },
    }   
</script>

<style scoped lang="less">

    .active{
        font-size: 1.5vw;
        font-weight: 1000;
    }
    nav{
        width: 100%;
        height: 10vh;
        background: #333;
        
        .nav{
            width: 80%;
            height:10vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
        }

        .logo{
            width: 13vw;
            display: flex;
            align-items: center;
            height: 100%;
            color: #fff;
            height: 100%;
            cursor: pointer;

            img{
                width: 3vw;
                height: 3vw;
                margin-right: 0.7vw;
            }

        }

        .active{
            color: rgb(220, 219, 219);
            font-weight: 1000;
            font-size: 1.2vw;
        }

        ul{
            width: 19.5vw;
            display: flex;
            justify-content: space-around;

            a{
                color: #fff;
                transition:.3s;

                &:hover{
                    color: rgb(189, 184, 184);
                }
            }
        }

        .user{
            height: 100%;
            display: flex;
            align-items: center;
            
            .login{
                color: #fff;
            }

            
            .logined{
                text-align: center;
                cursor: pointer;
                position: relative;

                img{
                    width: 30px;
                    height: 30px;
                }

                p{
                    color: #fff;
                }

                

                .box{
                    position: absolute;
                    background: #fff;
                    width: 9.8vw;
                    left: -3.5vw;
                    
                    
                    p{
                        color: #333;
                        line-height: 2vw;

                        &:hover{
                            background: #ccc;
                        }
                    }
                }
            
            }
        }
    }
</style>